<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { addSnapshot, delSnapshot, getSnapshotList, layoutSourceCopy, layoutSourceDel, layoutSourceSave, layoutSourceUpdate, pageByGroupSnapshotId, pageConfigSwitchStatus, updateByGroupSnapshotId, updateSnapshot, useApplicationList } from '@fl/api/advertising-api'
import { pageConfigSwitchShowTitle } from '@fl/api/advertising-api/page-config'
import { SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { defineProps } from 'vue'

import type { adFormType, appType, moveItemType, reqjsonType, tagType } from './type'

import { adgDialogTag, linkTypeMap, tabValue } from '../type'
import materialModule from './material-module.vue'
import chooseTime from './choose-time.vue'

const props = withDefaults(defineProps<{
    modelValue: number
}>(), {
    modelValue: 1,
})

const emits = defineEmits(['closeAndRefresh'])

const timeList = ref()
const currentTime = ref(0)
const loading = ref(false)
const btnLoading = ref(false)
const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))
const list = ref([])
const isLoading = ref(false)
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { type: 'checkbox', width: 50 },
        { title: '序号', type: 'seq', width: 70 },
        { field: 'imgUri', slots: { default: 'imgUri' }, title: '图片' },
        { field: 'headIconUri', slots: { default: 'headIconUri' }, title: '头角标' },
        { field: 'footIconUri', slots: { default: 'footIconUri' }, title: '尾角标' },
        { field: 'linkType', slots: { default: 'linkType' }, title: '链接类型', width: 80 },
        { field: 'businessType', title: '业务类型', width: 80 },
        { field: 'title', title: '楼盘/产品名称', width: 120 },
        // { field: 'forwardUrl', title: '链接' },
        { field: 'isShowTitle', slots: { default: 'isShowTitle' }, title: '启用标题', width: 90 },
        { field: 'activeStatus', slots: { default: 'activeStatus' }, title: '启用/禁用', width: 90 },
        { fixed: 'right', slots: { default: 'operate' }, title: '操作', width: 220 },
    ],
    height: 288,
})
const initForm = {
    activeEnd: '', // 生效结束时间
    activeStart: '', // 生效开始时间
    appListId: undefined, // 关联应用
    footIconUri: '', // 尾巴角标
    forwardParams: '', // 参数
    groupSnapshotId: undefined, // 广告排期id
    headIconUri: '', // 头角标
    id: undefined, // 广告id（此处不用，动态参数也可能有id）
    imgUri: '', // 图片
    sort: undefined,
    title: '', // 广告名称
}
const editId = ref<number | undefined>(undefined) // 编辑时的广告id

const adForm = ref(cloneDeep(initForm))
const dialogTitle = ref('')
const dialogVisible = ref(false)
const reqjson = ref([])
const adFormRef = ref()
const dialogWidth = ref(666)
const appList = ref([])
const fileType = ref<number>(tabValue.PIC_MANAGE)
const selectType = ref() // imgUri图片 headIconUri头角标 footIconUri尾巴角标
const tabsList: tagType[] = [
    {
        label: '图片管理',
        value: tabValue.PIC_MANAGE,
    },
    // {
    //     label: '视频管理',
    //     value: tabValue.VIDEO_MANAGE,
    // },
]
const isTrue = ref<boolean>(true)
const { data: appRes } = useApplicationList(isTrue)
const tableRef = ref()
const chooseTimeShow = ref<boolean>(false)
const resourceIdList = ref<Array<string>>([])

watch(
    () => props.modelValue,
    () => {
        getTimeList()
    },
    { immediate: true },
)
watchEffect(() => {
    if (appRes.value) {
        // appList.value = appRes.value.rows
        appList.value = appRes.value
    }
})

/**
 * methods start
 */

// 获取分期列表以及默认选中第一条
function getTimeList() {
    loading.value = true
    getSnapshotList({
        groupId: props.modelValue,
    }).then((data) => {
        loading.value = false
        // data有数据说明已存在广告排期
        if (data.length) {
            timeList.value = data.map(item => ({
                ...item,
                activeTime: [item.activeStart, item.activeEnd],
            }))
            selectTime(0, timeList.value[0])
        }
        else {
            timeList.value = [{
                activeTime: [],
                groupId: props.modelValue,
            }]
        }
    }).catch(() => {
        loading.value = false
    })
}

// 新增分期
function addAdTime(item, index) {
    const time = cloneDeep({
        activeTime: [],
        groupId: props.modelValue,
    })
    timeList.value.push(time)
    selectTime(index + 1, time)
}

// 获取分期下的广告列表
function getAdList(id) {
    isLoading.value = true
    pageByGroupSnapshotId({
        groupSnapshotId: id,
        pageNum: tablePage.value.currentPage,
        pageSize: tablePage.value.pageSize,
    }).then((res) => {
        isLoading.value = false
        // 考虑非第一页刚好只有一条被删除的情况
        if (tablePage.value.currentPage !== 1 && !res.rows?.length) {
            tablePage.value.currentPage--
            getAdList(id)
            return
        }
        list.value = res.rows
        tablePage.value.total = res.total
    }).catch(() => {
        isLoading.value = false
    })
}

// 选择分期
function selectTime(index, item) {
    currentTime.value = index
    adForm.value.groupSnapshotId = item.id
    if (item.activeStart && item.activeEnd) {
        adForm.value.activeStart = item.activeStart
        adForm.value.activeEnd = item.activeEnd
    }
    else {
        list.value = []
    }
    item.id && getAdList(item.id)
}

// 设置分期时间
async function changeTime(val, item, index) {
    if (val) {
        if (item.activeEnd && item.activeStart) {
            await updateSnapshot({
                activeEnd: val[1],
                activeStart: val[0],
                groupId: props.modelValue,
                id: item.id,
            }).then((res) => {
                item.activeTime = [res.activeStart, res.activeEnd]
                item.activeStart = res.activeStart
                item.activeEnd = res.activeEnd
                item.id = res.id
            }).catch(() => {
                item.activeTime = []
            })
            selectTime(index, item)
        }
        else {
            await addSnapshot({
                activeEnd: val[1],
                activeStart: val[0],
                groupId: props.modelValue,
            }).then((res) => {
                item.activeTime = [res.activeStart, res.activeEnd]
                item.activeStart = res.activeStart
                item.activeEnd = res.activeEnd
                item.id = res.id
                selectTime(index, item)
            }).catch(() => {
                item.activeTime = []
            })
        }
    }
}

// 删除分期
function delTime(item, index) {
    if (item.activeTime?.length) {
        ElMessageBox.confirm(
            '您确认要删除这个广告排期吗',
            '删除',
            {
                cancelButtonText: '取消',
                confirmButtonText: '删除',
                type: 'warning',
            },
        )
            .then(() => {
                delSnapshot({
                    activeEnd: item.activeTime[1],
                    activeStart: item.activeTime[0],
                    groupId: props.modelValue,
                    id: item.id,
                }).then(() => {
                    timeList.value.splice(index, 1)
                    let currentKey = 0
                    if (currentTime.value === index) {
                        if (index !== timeList.value.length)
                            currentKey = index
                        selectTime(currentKey, timeList.value[currentKey])
                    }
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                })
            }).catch(() => {
                ElMessage({
                    message: '取消删除',
                    type: 'info',
                })
            })
    }
    else {
        timeList.value.splice(index, 1)
        let currentKey = 0
        if (currentTime.value === index) {
            if (index !== timeList.value.length)
                currentKey = index
            selectTime(currentKey, timeList.value[currentKey])
        }
    }
}

// 分页
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
    getAdList(adForm.value.groupSnapshotId)
}

// 添加广告
async function addAdvertising() {
    dialogTitle.value = adgDialogTag.ADD_ADVERTISING
    const newForm = {
        activeEnd: adForm.value.activeEnd,
        activeStart: adForm.value.activeStart,
        appListId: undefined,
        footIconUri: '',
        forwardParams: '',
        groupSnapshotId: adForm.value.groupSnapshotId,
        headIconUri: '',
        id: undefined,
        imgUri: '',
        sort: undefined,
        title: '',
    }
    editId.value = undefined
    reqjson.value = []
    adForm.value = newForm
    adFormRef.value?.resetFields()
    dialogVisible.value = true
}

const multipleChooseNum = computed(() => {
    const $table = tableRef.value?.tableInstance
    if ($table) {
        const selectRecords = $table.getCheckboxRecords()
        return selectRecords?.length
    }
    else {
        return 0
    }
})

// 多选
function multiChoose() {
    const $table = tableRef.value?.tableInstance
    if ($table) {
        const selectRecords = $table.getCheckboxRecords()
        const ids = selectRecords.map(item => item.id)
        // console.log(selectRecords, 'selectRecords')
        resourceIdList.value = ids
        chooseTimeShow.value = true
    }
}

function confirmChoose(id: number) {
    const params = {
        resourceIdList: resourceIdList.value,
        snapshotId: id,
    }
    console.log('params', params)
    layoutSourceCopy(params).then((res) => {
        emits('closeAndRefresh')
    }).catch(() => {

    })
}

// 设置应用类型
function changeAppList(val) {
    const currentApp: appType = appList.value.find((item: appType) => item.id === val)
    if (currentApp && currentApp.reqjson) {
        reqjson.value = JSON.parse(currentApp.reqjson)
        if (adForm.value.forwardParams) {
            const forwardParams = JSON.parse(adForm.value.forwardParams)
            for (const key in forwardParams) {
                adForm.value[key] = forwardParams[key]
            }
        }
    }
    else {
        reqjson.value = []
    }
}

// 取消
function cancel() {
    dialogVisible.value = false
    editId.value = undefined
}

// 提交广告
async function advertisingSbumit(formEl: FormInstance | undefined) {
    if (dialogTitle.value === adgDialogTag.SELECT_MATERIAL) {
        dialogTitle.value = editId.value ? adgDialogTag.EDIT_ADVERTISING : adgDialogTag.ADD_ADVERTISING
        dialogWidth.value = 666
    }
    else {
        if (!formEl)
            return
        await formEl.validate(async (valid, fields) => {
            if (valid) {
                let msg = ''
                const { activeEnd, activeStart, appListId, footIconUri, groupSnapshotId, headIconUri, id, imgUri, sort, title } = adForm.value
                const params = {
                    activeEnd,
                    activeStart,
                    appListId,
                    footIconUri,
                    forwardParams: '',
                    groupSnapshotId,
                    headIconUri,
                    id: editId.value,
                    imgUri,
                    sort: sort ?? tablePage.value.total + 1,
                    title,
                }
                if (reqjson.value.length) {
                    const result = await reqjson.value.reduce((prev, cur: reqjsonType) => {
                        if (adForm.value[cur.value]) {
                            prev[cur.value] = adForm.value[cur.value]
                        }
                        else {
                            prev[cur.value] = '$'
                        }
                        return prev
                    }, {})
                    params.forwardParams = JSON.stringify(result)
                }
                if (editId.value) {
                    btnLoading.value = true
                    await layoutSourceUpdate(params).then(() => {
                        msg = '编辑成功'
                    }).catch(() => {
                        btnLoading.value = false
                    })
                }
                else {
                    btnLoading.value = true
                    await layoutSourceSave(params).then(() => {
                        msg = '添加成功'
                    }).catch(() => {
                        btnLoading.value = false
                    })
                }
                if (msg) {
                    ElMessage({
                        message: msg,
                        type: 'success',
                    })
                    getAdList(groupSnapshotId)
                    cancel()
                }
                btnLoading.value = false
            }
            else {
                console.log('error submit!', fields)
            }
        })
    }
}

// 弹窗关闭前
function beforeClose() {
    if (dialogTitle.value === adgDialogTag.SELECT_MATERIAL) {
        dialogTitle.value = editId.value ? adgDialogTag.EDIT_ADVERTISING : adgDialogTag.ADD_ADVERTISING
        dialogWidth.value = 666
        adForm.value[selectType.value] = ''
    }
    else {
        dialogVisible.value = false
    }
}

// 选择素材
function setMaterial(type) {
    selectType.value = type
    dialogWidth.value = 1280
    dialogTitle.value = adgDialogTag.SELECT_MATERIAL
    dialogVisible.value = true
}

function selectMaterial(url) {
    adForm.value[selectType.value] = url
}

// 启用标题
function switchShowTitle(row) {
    // console.log('switchShowTitle', row)
    if (isLoading.value)
        return
    const params = {
        id: row.id,
        enable: row.isShowTitle,
    }
    pageConfigSwitchShowTitle(params).then(() => {
        const tips = row.isShowTitle === 1 ? '已启用' : '已隐藏'
        ElMessage({
            message: tips,
            type: row.isShowTitle === 1 ? 'success' : 'info',
        })
        getAdList(row.groupSnapshotId)
    })
}

// 启用禁用
function switchActiveStatus(row) {
    const params = {
        enable: row.activeStatus,
        id: row.id,
    }
    pageConfigSwitchStatus(params).then(() => {
        const tips = row.activeStatus === 1 ? '已启用' : '已禁用'
        ElMessage({
            message: tips,
            type: row.activeStatus === 1 ? 'success' : 'info',
        })
        getAdList(row.groupSnapshotId)
    })
}

// 上移、下移
function moveItem(row, type) {
    const { groupSnapshotId, id } = row
    updateByGroupSnapshotId({
        id,
        move: type === 'up' ? 2 : 3, // 上移2 下移3
    }).then(() => {
        getAdList(groupSnapshotId)
        ElMessage({
            message: type === 'up' ? '上移成功' : '下移成功',
            type: 'success',
        })
    })
}

// 删除广告
function delAdvertising(row) {
    const { id, title } = row
    ElMessageBox.confirm(
        `您确认要删除广告『${title}』吗`,
        '删除',
        {
            cancelButtonText: '取消',
            confirmButtonText: '删除',
            type: 'warning',
        },
    )
        .then(() => {
            layoutSourceDel({
                id,
            }).then(() => {
                getAdList(row.groupSnapshotId)
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
            })
        }).catch(() => {
            ElMessage({
                message: '取消删除',
                type: 'info',
            })
        })
}

// 编辑广告
async function editAdItem(row) {
    dialogTitle.value = adgDialogTag.EDIT_ADVERTISING
    adForm.value = cloneDeep(row)
    editId.value = row.id
    await changeAppList(row.appListId)
    dialogVisible.value = true
}

/**
 * methods end
 */
</script>

<template>
    <div class="ad-config">
        <el-skeleton v-if="loading"
                     :rows="5"
                     animated
        />

        <div v-else
             class="content"
        >
            <div class="ad-by-stages">
                <div v-for="(item, index) in timeList"
                     :key="item.adTime"
                     class="time-item"
                >
                    <div :class="currentTime === index ? 'ad-time-piker active' : 'ad-time-piker'">
                        <el-date-picker v-model="item.activeTime"
                                        type="datetimerange"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        format="YYYY-MM-DD HH:mm:ss"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                        @change="(val) => changeTime(val, item, index)"
                        />

                        <span :class="currentTime === index ? 'sort active' : 'sort'"
                              @click="selectTime(index, item)"
                        >
                            {{ index + 1 }}
                        </span>
                    </div>

                    <div class="icon-btns">
                        <el-icon v-if="index === timeList.length - 1"
                                 class="add"
                                 @click.stop="addAdTime(item, index)"
                        >
                            <CirclePlus />
                        </el-icon>

                        <el-icon v-if="timeList.length > 1"
                                 class="del"
                                 @click.stop="delTime(item, index)"
                        >
                            <Delete />
                        </el-icon>
                    </div>
                </div>
            </div>

            <div class="adertising-list">
                <SearchTable ref="tableRef"
                             v-bind="gridOptions"
                             v-model:pager="tablePage"
                             :loading="isLoading"
                             :data="list"
                             @page-change="handlePageChange"
                >
                    <template #toolbar_buttons>
                        <div class="flex"
                             style="justify-content: space-between;width: 100%;"
                        >
                            <el-button type="primary"
                                       plain
                                       :disabled="!timeList[currentTime].activeTime?.length"
                                       @click="addAdvertising"
                            >
                                添加广告
                            </el-button>

                            <el-button type="primary"
                                       plain
                                       :disabled="multipleChooseNum === 0"
                                       @click="multiChoose"
                            >
                                复制广告到
                            </el-button>
                        </div>
                    </template>

                    <template #imgUri="row">
                        <div class="cell-img">
                            <img :src="row.row.imgUri"
                                 alt="图片"
                            >
                        </div>
                    </template>

                    <template #headIconUri="row">
                        <div v-if="row.row.headIconUri"
                             class="cell-img"
                        >
                            <img :src="row.row.headIconUri"
                                 alt="头角标"
                            >
                        </div>
                    </template>

                    <template #footIconUri="row">
                        <div v-if="row.row.footIconUri"
                             class="cell-img"
                        >
                            <img :src="row.row.footIconUri"
                                 alt="尾角标"
                            >
                        </div>
                    </template>

                    <template #linkType="row">
                        {{ linkTypeMap[row.row.linkType] }}
                    </template>

                    <template #forwardUrl="row">
                        <span class="forward-url">{{ row.row.forwardUrl }}</span>
                    </template>

                    <template #activeStatus="{ row }">
                        <el-switch v-model="row.activeStatus"
                                   :active-value="1"
                                   :inactive-value="0"
                                   @change="switchActiveStatus(row)"
                        />
                    </template>

                    <template #isShowTitle="{ row }">
                        <el-switch v-model="row.isShowTitle"
                                   :active-value="1"
                                   :inactive-value="0"
                                   @change="switchShowTitle(row)"
                        />
                    </template>

                    <template #operate="{ row }">
                        <div class="operate-btns">
                            <el-button type="info"
                                       text
                                       :disabled="row.sort === 1"
                                       @click="moveItem(row, 'up')"
                            >
                                上移
                            </el-button>

                            <el-button type="info"
                                       text
                                       :disabled="row.sort === tablePage.total"
                                       @click="moveItem(row, 'down')"
                            >
                                下移
                            </el-button>

                            <el-button type="info"
                                       text
                                       @click="editAdItem(row)"
                            >
                                编辑
                            </el-button>

                            <el-button text
                                       class="del-advertising"
                                       @click="delAdvertising(row)"
                            >
                                删除
                            </el-button>
                        </div>
                    </template>
                </SearchTable>
            </div>
        </div>
    </div>

    <el-dialog v-model="dialogVisible"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :title="dialogTitle"
               :class="[adgDialogTag.SELECT_MATERIAL, adgDialogTag.ADVERTISING_CONFIG, adgDialogTag.ADD_ADVERTISING, adgDialogTag.EDIT_ADVERTISING, adgDialogTag.EDIT_ADVERTISING].includes(dialogTitle) ? 'material-select-dialog' : ''"
               :width="dialogWidth"
               :before-close="beforeClose"
    >
        <template #footer>
            <div class="dialog-footer">
                <el-button v-if="dialogTitle !== adgDialogTag.SELECT_MATERIAL"
                           @click="cancel"
                >
                    取消
                </el-button>

                <el-button type="primary"
                           :loading="btnLoading"
                           @click="advertisingSbumit(adFormRef)"
                >
                    提交
                </el-button>
            </div>
        </template>

        <template v-if="[adgDialogTag.ADD_ADVERTISING, adgDialogTag.EDIT_ADVERTISING].includes(dialogTitle)">
            <el-form ref="adFormRef"
                     :model="adForm"
                     label-width="100"
                     label-position="right"
            >
                <el-form-item label="名称："
                              prop="title"
                              :rules="{
                                  required: true,
                                  message: '请输入',
                                  trigger: 'blur',
                              }"
                >
                    <el-input v-model="adForm.title" />
                </el-form-item>

                <el-form-item label="图片："
                              prop="imgUri"
                              :rules="{
                                  required: true,
                                  message: '请输入',
                                  trigger: 'change',
                              }"
                >
                    <div v-if="adForm.imgUri"
                         class="adImg-box"
                    >
                        <img :src="adForm.imgUri"
                             width="108"
                             alt="图片"
                        >
                    </div>

                    <div class="material-img"
                         @click="setMaterial('imgUri')"
                    >
                        <el-icon class="material-img-icon">
                            <Plus />
                        </el-icon>
                    </div>
                </el-form-item>

                <el-form-item label="头角标：">
                    <div v-if="adForm.headIconUri"
                         class="adImg-box"
                    >
                        <img :src="adForm.headIconUri"
                             width="108"
                             alt="头角标"
                        >
                    </div>

                    <div class="material-img"
                         @click="setMaterial('headIconUri')"
                    >
                        <el-icon class="material-img-icon">
                            <Plus />
                        </el-icon>
                    </div>
                </el-form-item>

                <el-form-item label="尾角标：">
                    <div v-if="adForm.footIconUri"
                         class="adImg-box"
                    >
                        <img :src="adForm.footIconUri"
                             width="108"
                             alt="尾角标"
                        >
                    </div>

                    <div class="material-img"
                         @click="setMaterial('footIconUri')"
                    >
                        <el-icon class="material-img-icon">
                            <Plus />
                        </el-icon>
                    </div>
                </el-form-item>

                <el-form-item label="关联应用："
                              prop="appListId"
                              :rules="{
                                  required: true,
                                  message: '请选择',
                                  trigger: 'change',
                              }"
                >
                    <el-select v-model="adForm.appListId"
                               filterable
                               clearable
                               @change="changeAppList"
                    >
                        <el-option v-for="appItem in appList"
                                   :key="appItem.id"
                                   :label="appItem.appName"
                                   :value="appItem.id"
                        />
                    </el-select>
                </el-form-item>

                <template v-if="reqjson.length">
                    <span v-for="itemJson in reqjson"
                          :key="itemJson.value"
                    >
                        <el-form-item v-if="itemJson?.isShow"
                                      :prop="itemJson.value"
                                      :rules="{
                                          required: true, message: '请输入', trigger: 'blur',
                                      }"
                        >
                            <template #label>
                                <a :title="itemJson.title"
                                   class="json-label"
                                >{{ `${itemJson.title}：` }}</a>
                            </template>

                            <el-input v-model="adForm[itemJson.value]" />
                        </el-form-item>
                    </span>
                </template>
            </el-form>
        </template>
        <!-- 选择素材 -->
        <template v-if="dialogTitle
            === adgDialogTag.SELECT_MATERIAL"
        >
            <el-tabs v-model="fileType"
                     class="material-type-tabs"
            >
                <el-tab-pane v-for="tabItem in tabsList"
                             :key="tabItem.value"
                             :label="tabItem.label"
                             :name="tabItem.value"
                >
                    <material-module v-if="fileType === tabItem.value"
                                     v-model="tabItem.value"
                                     :select-type="selectType"
                                     @checked="selectMaterial"
                    />
                </el-tab-pane>
            </el-tabs>
        </template>
    </el-dialog>

    <chooseTime v-model:visible="chooseTimeShow"
                @confirm-choose="confirmChoose"
    />
</template>

<style lang="scss" scoped>
 .ad-by-stages {
    display: flex;
    flex-wrap: wrap;
    .time-item {
        display: flex;
        width: 310px;
        margin-bottom: 12px;
        .ad-time-piker {
            display: flex;
            align-items: center;
            position: relative;
            > .sort {
                position: absolute;
                left: 0;
                top: 0;
                width: 30px;
                height: 32px;
                display: block;
                font-size: 16px;
                line-height: 32px;
                border-right: 1px solid #e6ebf5;
                text-align: center;
                cursor: pointer;
                &.active {
                    color: var(--el-color-primary);
                    border-right: 1px solid var(--el-color-primary);
                }
            }
            &.active {
                .el-range-editor.el-input__wrapper {
                    border: 1px solid var(--el-color-primary);
                }
            }
        }
        .el-range-editor.el-input__wrapper {
            width: 260px;
            padding-left: 40px;
        }
        .icon-btns {
            display: flex;
            align-items: center;
            margin-left: 10px;
            .el-icon {
                font-size: 18px;
                cursor: pointer;
                &.add {
                    color: var(--el-color-primary);
                    margin-right: 6px;
                }
                &.del {
                }
            }
        }
    }
}
.json-label {
    display: block;
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    text-align: right;
}
.cell-img {
    height: 100px;
    width: 100px;
    box-sizing: border-box;
    padding: 8px 0;
    > img {
        height: 60%;
        width: 100%;
    }
}
.forward-url {
    color: #006dcc;
    font-size: 16px;
    cursor: pointer;
}
.del-advertising {
    color: #da0004;
}
.material-img {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.material-img:hover {
    border-color: var(--el-color-primary);
}
.el-icon.material-img-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 108px;
    text-align: center;
}
.adImg-box {
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-right: 12px;
}
</style>

<style lang="scss">
.advertising-config {
    .el-dialog__body {
        padding: 20px 20px 0 20px;
    }
    .el-dialog__footer {
        padding: 0 20px 20px 20px;
    }
    .el-tabs__content {
        height: calc(100% - 60px);
        overflow-y: auto;
    }
    .el-tabs__nav-scroll {
        padding: 0 20px;
    }
}
// .advertising-list {
//     .vxe-table--render-default {
//         height: 288px;
//     }
// }
.material-select-dialog {
    // height: 88% !important;
    .el-dialog__body {
        height: 80%;
        overflow-y: auto;
    }
}
</style>
